<template>
    <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
        <div class="scroll-wrapper" 
          ref="scorllWrapper" 
          :style="{top: top + 'px'}">
          <slot></slot>
        </div>
    </div>
</template>

<script>
const delta = 0
export default {
    name: 'scrollBar',
    data () {
        return {
            top: 0
        }
    },
    methods: {
        handleScroll (e) {
            const eventDelta = e.wheelDelta || -e.deltaY*3
            const $container = this.$refs.scrollContainer
            const $containerHeight = $container.offsetHeight
            const $wrapper = this.$refs.scorllWrapper
            const $wrapperHeight = $wrapper.offsetHeight
            if (eventDelta > 0) {
                //向上滚动
                this.top = Math.min(0, this.top + eventDelta)
            } else {
                //向下滚动
                if ($containerHeight - delta < $wrapperHeight) {
                    if (this.top < -($wrapperHeight - $containerHeight + delta)) {
                        this.top = this.top
                    } else {
                        this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
                    }
                } else {
                    this.top = 0
                }
            }

        }
    }
}
</script>
<style lang="stylus" scoped>
    @import '../../styles/variables'
    .scroll-container
        position relative
        height 100vh
        background-color $menuBg
        overflow hidden
        .scroll-wrapper
            position absolute
            width 100%
            .el-menu--collapse
                width 100%
                border transparent

        
</style>

